<template>
	<div class="add-address">
		<div class="add-head">
			
			<p class="head-tiaozhuan">
				<a class="head-back" href="#/mytao">
					<i class="fa fa-angle-left"></i>
				</a>
				添加新地址 <a class="save" href="#/paymoney" @click="btn">保存</a>
			</p>
		</div>
		<div class="add-main">
			
			<p><span>收货人</span> <input type="text" v-model="data.name" checked="checked" /></p>	
			<p>	<span>联系电话</span>  <input type="text" v-model="data.phone"checked="checked" /></p>
			<group >
				<x-address style="font-size: 14px;" title="地址选择" v-model="addressValue" raw-value :list="addressData" value-text-align="left"></x-address>
				<x-textarea title="详细信息" v-model="data.addinfo" placeholder="请填写详细信息" :show-counter="false" :rows="3"></x-textarea>
			</group>	
			
		</div>
		<div class="Alladdress" v-for="item in address">
			<h4 class="h4">我所有的地址:</h4>
			<div class="address-main">
				<p class="shoupeople" >  
				<span class="name">收货人:{{item.name}}</span>
				<span class="tel">电话:{{item.phone}}</span>
			</p>	 
			<p><span class="shouaddress">{{item.address}} {{item.addinfo}}</span></p>
			<button @click="delAddress"> 删除 </button>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, ChinaAddressData, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		data() {
			return {
				addressData: ChinaAddressData,
				addressValue: [],
				data:{},
				address:[{}]
			}
		},
		components: {
			Group,
			GroupTitle,
			Cell,
			XInput,
			Selector,
			PopupPicker,
			XAddress,
			Datetime,
			XNumber,
			XTextarea,
			XSwitch
		},
		methods:{
			btn() {
			var that = this;
				var address = $('.vux-cell-value').text();
				console.log(address);
				that.data.address = address
				console.log(that.data);
				axios.post('/taobao/setaddress',that.data).then(function(data){
					console.log(111)
				})		
		},
		getaddress(){
				var that = this;
				axios.post('/taobao/getaddress').then(function(respone){
//					console.log(123)
					var res =  respone.data.data
					that.address = res.address;
//					console.log(that.address)
				})
		},	
		delAddress(){
				axios.post('/taobao/deladdress').then(function(result){
//					console.log(111);
					var res = result.data;
					if(res.error == 0){
						location.reload();
					}
				})
				
		}
	},
	mounted(){
		this.getaddress()
	}
		
	}
</script>

<style scoped="">
	.add-address{
		margin-bottom: 200px;
	}
	.add-head {
		background: orange;
		color: #fff;
		height: 40px;
		line-height: 40px;
		padding-right: 15px;
	}
	.head-back i{
		width: 20px;
		text-align: center;
		color: #fff;
		font-size: 20px;
	}
	.head-tiaozhuan .save{
		float: right;
		color: orangered;
	}
	.add-main{
		
	}
	.add-main p {
		padding: 0 15px;
		line-height: 40px;
		margin-top: 10px;
	}
	.add-main p span{
		display: inline-block;
		width: 80px;
		font-size: 14px;
	}
	.add-main p input{
		margin-top: 12px;
		width: 220px;
		border: none;
		line-height: 25px;
		font-size: 17px;
	}
	.weui-cell {
		line-height: 25px;
		padding-left: 15px;
		border-top: solid 1px #eee;	
		font-size: 14px;
	}
	.shoupeople {
		margin: 5px 0;
	}
	.Alladdress h4 {
		text-align: center;
		color: orangered;
	}
	.Alladdress{
		padding:  0 15px;
	}
	.address-main {
		border: solid 1px #666;
		height: 85px;
		font-size: 15px;
	}
	.tel{
		float: right;
	}
	.address-main button{
		float: right;
		color: #fff;
		background: orangered;
		border: none;
		padding: 4px 15px;
		cursor: pointer;
	}
</style>